<template>
  <div class="tool-bar-ri">
    <div class="header-icon">
      <!-- 选择语言 -->
      <el-popover placement="bottom" :width="200" trigger="click" :popper-style="{ padding: '8px 0' }">
        <template #reference>
          <svg-icon name="translate" class="icon-translate" size="22px" />
        </template>
        <div class="panel-select-lang">
          <ul>
            <li
              v-for="lang in languages"
              :key="lang.id"
              :selected="lang.id === language"
              @click="changeLanguage(lang.id as LanguageType)"
            >
              {{ lang.name }}
            </li>
          </ul>
        </div>
      </el-popover>
    </div>
    <Avatar />
  </div>
</template>

<script setup lang="ts">
import { useGlobalStore } from "@/stores/modules/global";
import { LanguageType } from "@/stores/types";
import Avatar from "./components/Avatar.vue";

// 多语言
const globalStore = useGlobalStore();
const language = globalStore.language;
const languages = [
  { id: "zh", name: "简体中文" },
  { id: "en", name: "英文" }
];
const changeLanguage = (language: LanguageType) => {
  globalStore.language = language;
  window.location.reload();
};
</script>

<style scoped lang="scss">
.tool-bar-ri {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 25px;
  .header-icon {
    display: flex;
    align-items: center;
    margin-right: 20px;
    & > * {
      margin-left: 16px;
    }
  }
  .username {
    margin: 0 20px;
    font-size: 15px;
  }
}
.icon-translate {
  cursor: pointer;
}
.panel-select-lang {
  > ul li {
    height: 28px;
    padding: 0 12px;
    line-height: 28px;
    cursor: pointer;
    &[selected="true"] {
      color: var(--el-color-primary);
    }
    &:hover {
      background-color: var(--el-fill-color-light);
    }
  }
}
</style>
